<template>
  <div>
    <!--为echarts准备一个具备大小的容器dom-->
    <div ref="main" id="main" style="width: 100%; height: 1000px"></div>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  name: "",
  data() {
    return {
      chartData: { list: [] },
    };
  },
  mounted() {
    this.drawLine("main", this.chartData);
  },
  methods: {
    fetchData() {
      let self = this;
      this.$http({
        url: this.$http.adornUrl('/data/wind/list2'),
        methods: 'get',
        responseType: 'json', // 设置返回数据的类型为 JSON
      }).then((response) => {
        const data = response.data;
        const iterator = data.list.values();
        const fistInnerList = iterator.next().value;
        console.log(fistInnerList);
        const secondInnerList = iterator.next().value;
        console.log(secondInnerList);
        self.charts.setOption({
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: fistInnerList.map((item) => item.time)
        },
        series: [
          {
            name: 'Truth',
            type: 'line',
            stack: 'Total',
            data: fistInnerList.map((item) => item.power)
          },
          {
            name: 'Pred',
            type: 'line',
            stack: 'Total',
            data: secondInnerList.map((item) => item.testPred)
          },
        ]
      });
      });
    },
    drawLine(id, data) {
      this.charts = this.$echarts.init(document.getElementById("main"));
      this.charts.setOption({
        title: {
          text: '风能产电对比图'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Truth', 'Pred']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        // dataZoom: [
        //   {
        //     type: 'slider', // 滚动条型数据视图
        //     show: true,
        //     start: 0, // 默认开始位置
        //     end: 15, // 默认结束位置
        //     orient: 'horizontal', // 水平方向
        //     zoomLock: true // 锁定滚动条，只能滚动一个维度
        //   },
        //   {
        //     type: 'inside', // 内置型数据视图
        //     start: 0, // 默认开始位置
        //     end: 10000, // 默认结束位置
        //     orient: 'horizontal', // 水平方向
        //     zoomLock: true // 锁定滚动条，只能滚动一个维度
        //   }
        // ],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // data: fistInnerList.map((item) => item.time)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'Truth',
            type: 'line',
            stack: 'Total',
            // data: fistInnerList.map((item) => item.power)
          },
          {
            name: 'Pred',
            type: 'line',
            stack: 'Total',
            // data: secondInnerList.map((item) => item.testPred)
          },
        ]
      });
    },
  },
  //调用
  mounted() {
    this.$nextTick(function () {
      this.drawLine("main", this.chartData);
    });
    this.$nextTick(function () {
      this.fetchData();
    });
  },
};
</script>

<style scoped></style>